<template>
  <div :id="currentId" />
</template>

<script>
import * as echarts from 'echarts/core'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import resizeEcharts from '@/utils/resizeEcharts'

export default {
  name: 'ThreeEcharts',
  mixins: [resizeEcharts],
  props: {
    currentId: {
      type: String,
      default: ''
    },
    option: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    echarts.use([
      TitleComponent,
      TooltipComponent,
      LegendComponent,
      PieChart,
      CanvasRenderer])
    this.initChart()
  },
  methods: {
    initChart() {
      let chartDom = document.getElementById(this.currentId)
      this.myChart = echarts.init(chartDom)
      let option = {
        title: [{
          text: this.$props.option.title,
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: '16' // 22
          }
        }],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          position: function(p) { // 其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10]
          }
        },
        legend: {
          bottom: '1%',
          itemWidth: 5,
          itemHeight: 10,
          data: this.$props.option.legendData,
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12' // 12
          }
        },
        series: [{
          name: this.$props.option.title,
          type: 'pie',
          center: ['50%', '42%'],
          radius: ['40%', '60%'],
          color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: this.$props.option.seriesData
        }]
      }
      this.myChart.setOption(option, true)
    }
  }
}
</script>

<style scoped>

</style>
